<template>
    <div>
        <Detail-Banner :sight-name="sightName"
          :banner-image="bannerImage"
          :gallery-images="galleryImages"></Detail-Banner>
        <Detail-Header></Detail-Header>
        <div class="content-box">
            <Detail-List v-bind:category-list='categoryList'></Detail-List>
        </div>
    </div>
</template>

<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/DetailHeader'
import DetailList from './components/List'
import axios from 'axios'
export default{
  name: 'CityDetail',
  data: function () {
    return {
      sightName: '',
      bannerImage: '',
      galleryImages: [],
      categoryList: []
    }
  },
  components: {
    'DetailBanner': DetailBanner,
    'DetailHeader': DetailHeader,
    'DetailList': DetailList
  },
  methods: {
    getDetailInfo: function () {
      axios.get('http://localhost:8080/static/mock/detail.json?id=' + this.$route.params.id)
        .then(this.getDetailInfoSuccess)
    },
    getDetailInfoSuccess: function (res) {
      if (res.data.ret && res.data.data) {
        var data = res.data.data
        this.sightName = data.sightName
        this.bannerImage = data.bannerImage
        this.galleryImages = data.galleryImages
        this.categoryList = data.categoryList
      }
    }
  },
  mounted: function () {
    this.getDetailInfo()
  }
}
</script>

<style lang='stylus' scoped>
  .content-box{
    height: 245rem;
  }
</style>
